import React from 'react'
import { CameraOutline } from 'antd-mobile-icons'
import {
  NavBar,
  Button,
  Form,
  Input,
} from 'antd-mobile'

function App() {
  return (
    <div>
      <div style={{ backgroundColor: 'skyblue', color: '#fff' }}><NavBar >新增乘客</NavBar></div>
      <div>
        <Button block size='large'>
          <CameraOutline />扫描证件添加
        </Button>
      </div>
      <div>
        <Form
          layout='horizontal'
          footer={
            <Button block type='submit' color='success' size='large'>
              提交
            </Button>
          }
        >
          <Form.Item
            name='type'
            label='乘客类型'
            rules={[{ required: true, message: '乘客类型不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入乘客类型' />
          </Form.Item>
          <Form.Item
            name='name'
            label='姓名'
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入姓名' />
          </Form.Item>
          <Form.Item
            name='codetype'
            label='证件类型'
            rules={[{ required: true, message: '证件类型不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入证件类型' />
          </Form.Item>
          <Form.Item
            name='code'
            label='证件号码'
            rules={[{ required: true, message: '证件号码不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入证件号码' />
          </Form.Item>
          <Form.Item
            name='phone'
            label='手机号码'
            rules={[{ required: true, message: '手机号码不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入手机号码' />
          </Form.Item>
          <div style={{marginTop:'15px'}}>
            为配合疫情防控工作，需提供每名乘客的<b style={{color:'red',fontSize:'20px'}}>本人手机号</b>,老人或无手机号的乘客，可填写亲友手机号
          </div>
          <div style={{textAlign:'center',marginTop:'15px'}}>
            本地购票服务由票务提供
          </div>
        </Form>
      </div>
    </div>
  )
}

export default App
